	<table class="list" cellspacing="0" cellspan="0" width="100%">
		<thead>
			<tr>
				<th align="left">Name</th>
				<th align="left">Product</th>
				<th align="left">Actions</th>
			</tr>
		</thead>
		<tbody>
			{% for component in test_case.component.all %}
			<tr class="{% cycle 'odd' 'even' %}" id="row-{{ component.pk }}">
				<td>
                                    {{ component.name }}
                                    <input type="hidden" name="component" value="{{ component.pk }}">
                                </td>
				<td>{{ component.product }}</td>
				<td>
					{% if perms.testcases.delete_testcasecomponent %}
					<a class="link_remove_component remove" href="#component">Remove</a>
					{% else %}
					None
					{% endif %}
				</td>
			</tr>
			{% empty %}
			<tr>
				<td colspan="3" align="center" class="grey">No component</td>
			</tr>
			{% endfor %}
			<tr>
				<td colspan="3">
				{% if perms.testcases.add_testcasecomponent %}
					<div class="addtag">
                                            <span class="tit">Add Component</span>
                                            <input id="id_components" type="text" name="components">
                                            <a href="#component" class="addlink" id="js-add-component">Add</a>
                                            <div id="id_components_autocomplete"></div>
					</div>
                                {% endif %}
				</td>
			</tr>
		</tbody>
	</table>
